#include('/header.html', {title : '课程任务计划'})
<div class="es-wrap">
  <div id="content-container" class="container">
    #include('header.html')
    <div class="row">
      <div class="col-md-3">
        <div class="sidenav locked js-sidenav" data-course-length="1">
          #include('sideMenu.html', {tasks : 'active'})
        </div>
      </div>
      <div class="col-md-9">
        <!--添加课程任务计划模态框-->
        <div id="modal" class="modal fade" data-backdrop="static">
          <div class="modal-dialog  modal-lg" data-clear="0">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" onclick="closeModal();">
                  <i class="cd-icon cd-icon-close"></i>
                </button>
                <h4 class="modal-title">添加任务</h4>
              </div>
              <div class="modal-body height-100">
                <div class="load-animation"></div>
                <!--模态框内容区-->
              </div>
            </div>
          </div>
        </div>

        <div id="task-add" class="panel panel-default">
          <div class="panel-heading">
            计划任务
          </div>
          <div class="panel-body">
            <div class="task-list-header clearfix js-task-list-header">
              任务总数：<span class="color-warning space">{{tasks.length}}</span>
              <div class="pull-right">
                <button class="btn btn-primary btn-sm" @click="openAdd">
                  <i class="es-icon es-icon-anonymous-iconfont"></i>
                  任务
                </button>
              </div>
            </div>
            <!--任务展示列表-->
            <ul class="task-manage-list sortable-list">
              <task-box v-for="(task, index) in tasks" :task="task"
                        :index="index + 1" :key="task.id"/>
            </ul>
            <!--没有任务显示-->
            <div v-if="tasks.length <= 0" class="empty task-empty js-task-empty">
              <i class="es-icon es-icon-book task-empty-icon"></i>
              什么都没有，快去添加一个学习任务!
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<template id="task-box">
  <li class="task-manage-item clearfix">
    <div class="item-default-header clearfix">
      <div class="item-line"></div>
      <div class="item-content text-overflow js-item-content">
        <i class="mrm es-icon es-icon es-icon-videoclass"></i>
        <span>任务</span>
        <span class="number">{{index}}</span>：
        <span>{{task.name}}</span>
        <span class="color-gray mls">（{{toTime(task.duration)}}）</span>
        <span v-if="task.status==0" class="color-warning publish-status">（未发布）</span>
        <span v-if="task.status==1" class="color-success publish-status">（已发布）</span>
        <span v-if="task.electives==1" class="label label-warning">选修</span>
      </div>
      <div class="item-actions">
        <a class="btn gray-darker" href="javascript:" @click="edit_">
          <i class="es-icon es-icon-edit mrs"></i>编辑
        </a>
        <a class="btn gray-darker" :href="getPreView()" target="_blank">
          <i class="es-icon es-icon-removeredeye mrs"></i>预览
        </a>
        <span class="dropdown">
          <a href="javascript:" class="dropdown-toggle dropdown-more btn gray-darker" data-toggle="dropdown">
            <i class="es-icon es-icon-keyboardarrowdown mrs"></i>更多
          </a>
          <ul class="dropdown-menu pull-right dropdown-menu-more" style="margin-top:12px;min-width:144px">
            <li @click="setStatus(0)" v-if="task.status==1">
              <a class="unpublish-item" href="javascript:">
                <i class="es-icon es-icon-close01 mrm"></i>取消发布
              </a>
            </li>
            <li @click="setStatus(1)" v-if="task.status==0">
              <a class="publish-item " href="javascript:">
                <i class="es-icon es-icon--check-circle mrm"></i>发布
              </a>
            </li>
            <li @click="delete_">
              <a class="delete-item " href="javascript:">
                <i class="es-icon es-icon-delete mrm"></i>删除
              </a>
            </li>
          </ul>
        </span>
      </div>
    </div>
  </li>
</template>
<script>
  var tm = new Vue({
    el: '#task-add',
    data: {
      kid: ${kid},
      modalUrl: 'tasks/set',
      modalTitle: '添加任务',
      tasks: [],
      changeTask: {
        goal: 0,
        electives: 0
      }
    },
    methods: {
      openAdd: function () {
        $('#modal').modal('show')
      }
    },
    components: {
      'task-box': {
        props: ['task', 'index'],
        template: '#task-box',
        methods: {
          toTime: function(ms) {
            var m = parseInt(ms / 60);
            var mm = ms % 60;
            return '时长: ' + m + ":" + mm;
          },
          getPreView: function() {
            var kid = this.task.courseId;
            var id = this.task.id;
            return '/course/'+kid+'/task/'+id+'/show?preview=1';
          },
          setStatus: function(status) {
            var kid = this.task.courseId;
            var id = this.task.id;
            if (status == 0) {
              $.post('/course/set/task/' + kid + '/unpublish/' + id);
            } else {
              $.post('/course/set/task/' + kid + '/publish/' + id);
            }
            this.task.status = status;
          },
          delete_: function() {
            var self = this;
            var kid = this.task.courseId;
            var id = this.task.id;
            $.post('/course/set/task/' + kid + '/delete/' + id, function (data) {
              if (data.success) {
                tm.tasks.splice(self.index-1, 1); // 删除自己
              }
            });
          },
          edit_: function () {
            tm.changeTask = this.task;
            openModal();
          }
        }
      }
    },
    watch: {
      modalTitle: function (nv) {
        $('.modal-title').html(nv);
      }
    },
    mounted: function () {
      var self = this;
      $.post('/course/task/api/' + this.kid + '/page', {mater: true}, function (data) {
        if (data.success) {
          self.tasks = data.payload.rows;
        }
      })
    }
  });

  $('#modal').on('show.bs.modal', function (e) {
    $.post(tm.modalUrl, function (html) {
      $(e.target).find('.modal-body').html(html);
    });
  }).on('hidden.bs.modal', function (e) { // 关闭模态框后 还原数据
    tm.tabNum = 1;
    tm.tabTaskType = 'video';
    $('.js-course-tasks-item').removeClass('active');
    $(this).find('.modal-body').html('<div class="load-animation"></div>');
  });

  function closeModal() {
    if (window.closeModal_) {
      closeModal_();
    } else {
      $('#modal').modal('hide');
    }
  }

  function openModal() {
    $('#modal').modal({show: true, keyboard: false});
  }
</script>
#include('/footer.html')
